昨天好不容易把方塊本人抓到中間。

margin: 0 auto;

很好 ~

左右置中，成功!

本來想說事情到這裡應該差不多了。

結果腦袋突然冒出一個很貪心的想法：

那上下也可以一起嗎？
我不要只有左右!
我要它：

上、下、左、右，全部給我站好。

這時候就輪到昨天沒有講完的主角登場—— Flexbox

先說。

Flexbox 我不是第一次用。

甚至平常看到排版問題，第一個反應常常都是：

display: flex;

先做一個最簡單的範例。

HTML：

<div class="container">
  <div class="box">
    抓到我啊～
  </div>
</div>

CSS：

.container {
  height: 400px;
  border: 2px solid black;

  display: flex;
}

.box {
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

加上

display: flex;

之後……

嗯？
好像也沒有什麼驚天動地的變化。
方塊還是在那。

Flexbox：「你只叫我上班，又沒有跟我說要做什麼。」

也是~有道理 ==

• 第一位出場：justify-content

那先來：
CSS:

.container {
  height: 400px;
  border: 2px solid black;

  display: flex;
  justify-content: center;
}

欸！

方塊左右跑到中間了。

好。

目前很好理解。

所以我很自然地記成：

justify-content = 左右

應該沒問題吧？

呵呵

等等就有問題。

• 第二位：align-items
  接著再補一行 CSS：

.container {
  height: 400px;
  border: 2px solid black;

  display: flex;
  justify-content: center;
  align-items: center;
}

重新整理之後——

終於！！！！

方塊直接站在整個框框的正中間。

沒有靠左。

沒有黏上面。

也沒有只有文字自己跑走。

我要的從昨天到今天其實就只是這樣啊 QQ

所以現在看起來CSS：

justify-content: center;

負責左右。

align-items: center;

負責上下。

是不是很簡單？

我當下也是這樣想的。

直到我手賤加了一行：

flex-direction: column;

等一下，你們怎麼交換工作了？？？

原本 CSS：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

我已經在腦袋裡背好了：

justify = 左右

align = 上下

結果如果今天加入 CSS：

.container {
  display: flex;
  flex-direction: column;
}

事情突然開始不對。

原本控制左右的 justify-content，

怎麼變成上下了!

我：？？？？？？？

你們兩個是可以隨便換班的是不是？

原來我一開始就記錯了

重新看一次才知道。

其實不應該直接記：

justify-content = 左右
align-items = 上下

真正應該記的是：

justify-content → 控制主軸

**align-items → 控制交叉軸 **

什麼主軸？
什麼交叉軸？
為什麼 column 一 出現大家就集體換方向？

好!

今天先到這裡。

至於它們到底為什麼這樣動—
明天再來算帳。

Day 4，完成！明天繼續來搞懂主軸跟交叉軸到底在忙什麼 嘻嘻